<template>
  <div class="wrapper">
    <el-form>
      <table border="1" style="width:100%;border:1px solid #e4e4e4">
        <tr height="50">
          <td class="px-2 w140 text-right">* 工单分类：</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Classify" class="w-100" size="small">
              <!--<el-option label="其他" value="0"></el-option>-->
              <el-option label="灯不亮" value="1"></el-option>
<!--              <el-option label="中杆灯" value="2"></el-option>-->
<!--              <el-option label="高杆灯" value="3"></el-option>-->
<!--              <el-option label="小灯" value="4"></el-option>-->
<!--              <el-option label="线缆" value="5"></el-option>-->
              <!--<el-option label="配电箱" value="6"></el-option>-->
            </el-select>
          </td>
          <td class="px-2 w140 text-right">* 信息来源：</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Source" class="w-100" disabled size="small">
              <el-option label="设备报警" value="2"></el-option>
            </el-select>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">* 工单级别：</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Level" class="w-100" size="small">
              <el-option label="普通" value="3"></el-option>
              <el-option label="次紧急" value="2"></el-option>
              <el-option label="紧急" value="1"></el-option>
            </el-select>
          </td>
          <td class="px-2 w140 text-right">* 指派责任区：</td>
          <td style="padding:0 10px">
            <el-tooltip class="item" :content="errors.first('workAssignedAreaId')" :value="errors.has('workAssignedAreaId')" :manual="true">
              <el-form-item style="margin:0" required :class="{'is-error':errors.has('workAssignedAreaId')}">
                <el-select v-model="work.AssignedAreaId" class="w-100" size="small" @change="changearea" name="workAssignedAreaId" v-validate="'required'">
                  <el-option v-for="(item,index) in areas" :key="index" :label="item.Name" :value="item.Id"></el-option>
                </el-select>
              </el-form-item>
            </el-tooltip>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">指派处理人：</td>
          <td style="padding:0 10px">
            <el-select v-model="work.AssignedUserId" class="w-100" size="small" @change="changeUser">
              <el-option v-for="(item,index) in UserId" :key="index" :label="item.Name" :value="item.Id"></el-option>
            </el-select>
          </td>
          <td class="px-2 w140 text-right">工单接收人号码：</td>
          <td style="padding:0 10px">
            <el-tooltip :content="errors.first('SmsPhone')" :value="errors.has('SmsPhone')" :manual="true">
              <el-input placeholder="请输入内容" class="input-with-select" clss="w-100" size="small" v-model="work.SmsPhone"
                        :class="{'is-error':errors.has('SmsPhone')}" v-validate="'smsPhone'" name="SmsPhone"></el-input>
            </el-tooltip>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">* 派遣时间:</td>
          <td style="padding:0 10px">
            <el-tooltip :content="errors.first('StartTime')" :value="errors.has('StartTime')" :manual="true">
              <el-date-picker v-model="work.StartTime" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" class="w190"
              :class="{'is-error':errors.has('StartTime')}" v-validate="'required'" name="StartTime"></el-date-picker>
            </el-tooltip>
          </td>
          <td class="px-2 w140 text-right">* 办理时限：</td>
          <td style="padding:0 10px">
            <el-tooltip :content="errors.first('endTime')" :value="errors.has('endTime')" :manual="true">
              <el-date-picker v-model="work.EndTime" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" size="small" class="w190"
                              :class="{'is-error':errors.has('endTime')}" name="endTime" v-validate="'required'"></el-date-picker>
            </el-tooltip>
          </td>
        </tr>
        <tr height="100">
          <td class="px-2 w140 text-right">* 工单内容：</td>
          <td style="padding:0 10px" colspan="3" class="py-2">
            <el-tooltip class="item" :content="errors.first('workContent')" :value="errors.has('workContent')" :manual="true">
              <el-form-item style="margin:0" required :class="{'is-error':errors.has('workContent')}">
                <el-input resize="none" type="textarea" rows="4" placeholder="请输入内容" v-model="work.Content" v-validate="'required'" name="workContent"></el-input>
              </el-form-item>
            </el-tooltip>
          </td>
        </tr>
        <tr></tr>
        <tr height="50">
          <td class="px-2 w140 text-right">上传图片：</td>
          <td style="padding:0 10px" colspan="3"><input type="file" multiple="multiple" class="w-100" id="file_0" @change="uploadFiles($event)"></td>
        </tr>
      </table>
    </el-form>

    <div class="d-flex" style="width:170px;margin:30px auto 0 auto">
      <el-button class="ur-btn ur-btn-primary w80" @click="Create"><i class="iconfont icon-queding"></i>确定</el-button>
      <el-button class="ur-btn ur-btn-primary w80" @click="closeWorkDialog()"><i class="iconfont icon-close1"></i>取消</el-button>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  export default {
    components: {},
    props: {
      areas: {},
      data: {}
    },
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
        },
        People: [],
        work: { "Source": '2', Classify: '1', Level: '1', },
        phone: [],
        file: [],
        UserId: []
      }
    },
    watch: {},
    computed: {},
    methods: {
      uploadFiles(event) {
        if (event.target.files && ['jpg', 'png', 'jpeg'].indexOf(event.target.files[0].name.split('.')[1]) === -1) {
          this.$message.error('文件类型不符合')
          return false
        } else {
          this.file = event.target.files;
        }
      },
      changearea() {
        let self = this;
        api.fetchSimple('/User/QueryUserByArea', { areaId: this.work.AssignedAreaId }).then(r => {
          this.UserId = r.data;
          r.data.map(function (e) {
            self.People[e.Id] = e.Name
            self.phone[e.Id] = e.Mobile
          })
        })
        //this.work.AssignedUserId = this.People[this.work.AssignedAreaId]
        //this.work.SmsPhone = this.phone[this.work.AssignedAreaId]
      },
      changeUser() {
        this.work.SmsPhone = this.phone[this.work.AssignedUserId]
      },
      Create() {
        let _this=this
         this.$validator.validateAll().then((res) => {
           // let result = _this.formValidata('work')
           if (res) {
             api.fetch("/Workorder/Create?source=2&&devNo=" + this.data.PoleNo, this.work).then(r => {
               if (r) {
                 if (_this.file.length != 0) {
                   var formData = new FormData();
                   for (let i = 0; i < _this.file.length; i++) {
                     formData.append("files", _this.file[i]);
                   }
                   var o = { url: 'Workorder/SaveWorkFiles?workId=' + r.data, data: formData }
                   api.ajaxFormFile(o, function (r) {
                     if (r == undefined) {
                       _this.$message.success('派单成功');
                       _this.closeWorkDialog();
                       _this.WorkDialog()
                     }
                   })
                 } else {
                   _this.$message.success('派单成功');
                   _this.closeWorkDialog();
                   _this.WorkDialog()
                 }
               }
             })
           }
         })
        //this.WorkDialog();
        //this.closeWorkDialog()
      },
      closeWorkDialog() {
        this.$emit('closeWorkDialog', false)
      },
      WorkDialog() {
        this.$emit('WorkDialog', true)
      },
      async queryWorkConten(){
        let res = await api.fetchSimple('/History/QueryLightAlarmDesc', {tnId: this.data.TnId})
        this.$set(this.work,'Content',res.data)
      }
    },
    created() {
      this.work.StartTime = api.formatDate(new Date(),'yyyy-MM-dd HH:mm:ss')
      this.queryWorkConten()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">

  table head {
    display: none
  }
</style>
